<template>
  <div class="back">
    <div @click="backPage">
      <div>
        <el-icon :size="20" color="#474747"><ArrowLeftBold /></el-icon>
      </div>
      <div>{{ props.title }}</div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ArrowLeftBold } from "@element-plus/icons-vue";
import { defineProps } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: () => "返回",
  },
});

const router = useRouter();
const backPage = () => {
  router.push("/center");
};
</script>

<style scoped lang="scss">
.back {
  background: #fff;
  position: fixed;
  width: 100%;
  height: 60px;
  font-size: 18px;
  display: flex;
  align-items: center;
  left: 0;
  top: 0;
  justify-content: space-between;
  color: #474747;
  padding: 0 10px;
  box-sizing: border-box;
  z-index: 100;
  & > div {
    display: flex;
  }
  &:hover {
    cursor: pointer;
  }
}

.del {
  width: 50px;
  justify-content: end;
  &:hover {
    cursor: pointer;
  }
}
</style>
